<template>
	<view style="height: 100vh;" :class="nightStatus ? 'nightTheme' : ''">
		<page-title :Theme="nightStatus ? 'nightTheme' : ''">音乐详情</page-title>
		
		<!-- 歌曲信息 -->
		<view class="d-inline-block w-100 text-center py-3">
			<view>
				<text class="font">歌曲:</text>
				<text>{{audioName}}</text>
			</view>
			<view>
				<text class="font">歌手:</text>
				<text class="font-weight-bold">{{singerName}}</text>
			</view>
		</view>
		
		<!-- 歌曲图片 -->
		<view class="flex align-center justify-center" style="height: 420rpx;">
			<image 
			src="../../static/music/music3.png" 
			mode="widthFix" 
			lazy-load
			style="border-radius: 35rpx;box-shadow: 0 2rpx 6rpx 0;"
			></image>
		</view>
		
		<!-- 进度部分 -->
		<view class="flex align-center justify-center" style="color: #7a8388;">
			<!-- 总时长 -->
			<view>{{ durationTime | formatTime }}</view>
			<!-- 进度条 -->
			<view style="width: 500rpx;">
				<slider 
				block-size="16" 
				activeColor="#e48267" 
				backgroundColor="#eef2f3"
				:value="currentTime"
				:max="durationTime"
				@change="sliderToPlay"
				@changing="sliderToPlay"
				/>
			</view>
			<!-- 当前播放时间 -->
			<view>{{ currentTime | formatTime }}</view>
		</view>
		
		<!-- 按钮部分 -->
		<view class="flex justify-center align-center" style="padding-top: 60rpx;">
			<view class="mr-3" @click="preOrNext('pre')">
				<my-icon iconId="icon-shangyishou" iconSize="85" />
			</view>
			<view class="mx-5" @click="playOrPause">
				<my-icon :iconId="playStatus ? 'icon-zanting': 'icon-bofang1'" iconSize="80" />
			</view>
			<view class="ml-2" @click="preOrNext('next')">
				<my-icon iconId="icon-xiayishou" iconSize="85" />
			</view>
		</view>
		
		<view 
		class="flex align-center font" 
		style="padding: 100rpx 0 114rpx 0; justify-content: space-around;"
		>
			<view class="flex flex-column align-center">
				<my-icon iconId="icon-icon--" iconSize="60" />
				<text class="pt-1">播放列表</text>
			</view>
			<view class="flex flex-column align-center" style="0 80rpx;" @click="changeStatus('collectStatus')">
				<my-icon :iconId="collectStatus ? 'icon-xihuan2' : 'icon-aixinfengxian'" iconSize="60" />
				<text class="pt-1">收藏</text>
			</view>
			<view class="flex flex-column align-center" @click="changeStatus('nightStatus')">
				<my-icon :iconId="nightStatus ? 'icon-yueliang': 'icon-yejianmoshi'" iconSize="60" />
				<text class="pt-1">夜间模式</text>
			</view>
		</view>
		
		<!-- 歌曲信息详情 -->
		<view 
		class="shadow p-2 animated fadeInUp" 
		:class="nightStatus ? 'nightTheme' : ''"
		:style="{ borderRadius: nightStatus ? '0' : '30rpx' }"
		>
			<view class="flex justify-between">
				<view>
					<view>
						<text class="font">歌曲:</text>
						<text>{{audioName}}</text>
					</view>
					<view>
						<text class="font">歌手:</text>
						<text class="font-weight-bold">{{singerName}}</text>
					</view>
				</view>
				<my-icon iconId="icon-jieshao" iconSize="65" @click.native="showSingerSynopsis" />
			</view>
			
			<view class="py-2">
				<view class="font-md pt-2">歌手简介:</view>
				<!-- text-ellipsis -->
				<view class="w-100">{{singerSynopsis}}</view>
			</view>
		</view>
	    
		<!-- 歌曲详情弹窗 -->
		<uni-popup ref="popup">
			<view 
			class="px-3 py-3 shadow" 
			style="width: 600rpx;height: 850rpx;border-radius: 60rpx;"
			:class="nightStatus ? 'nightTheme' : 'bg-white'"
			>
				<text class="font">{{singerSynopsis}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import PageTitle from '@/components/pageTitle.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import unit from '../../common/unit.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data(){
			return {
				collectStatus: false,
				nightStatus: false,
			}
		},
		filters:{
			formatTime(num){
				return unit.formatTime(num);
			}
		},
		components: {
			PageTitle,
			'uni-popup': uniPopup
		},
		computed:{
			...mapState({
				playStatus: ({ audio }) => audio.playStatus,
				durationTime: ({ audio }) => audio.durationTime,
				currentTime: ({ audio }) => audio.currentTime
			}),
			...mapGetters(['audioName','singerName','singerSynopsis']),
		},
		methods: {
			...mapActions([ 'playOrPause', 'preOrNext', 'sliderToPlay' ]),
			// 改变状态
			changeStatus(statusType){
				this[statusType] = !this[statusType];
			},
			// 展示歌手简介详情
			showSingerSynopsis(){
				this.$refs.popup.open();
			}
		}
	}
</script>

<style>

</style>
